<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">
        文章列表
      </div>
      <div class="container-fluid common_con">
        <div class="row opt_btns">
          <div class="col-xs-6">
            <form class="form-inline">
              <select
                v-model="categoryId"
                id="selCategory"
                name=""
                class="form-control input-sm"
              >
                <option value="">所有分类</option>
                <option
                  v-for="item in categoryList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</option
                >
              </select>
              <select
                v-model="state"
                id="selStatus"
                name=""
                class="form-control input-sm"
              >
                <option value="">所有状态</option>
                <option value="草稿">草稿</option>
                <option value="已发布">已发布</option>
              </select>
              <!-- 因为两个下拉框都有双向绑定，所以选择了分类，data中的数据会自动变化，方法传的参数也会自动发送变化 -->
              <!-- 就可以调用同一个函数 -->
              <button
                id="btnSearch"
                class="btn btn-default btn-sm"
                @click.prevent="
                  page = 1
                  reload()
                "
              >
                筛选
              </button>
            </form>
          </div>
          <div class="col-xs-6">
            <a
              href="javascript:void(0);"
              class="btn btn-success btn-sm pull-right"
              id="release_btn"
              @click="$router.push('/articleRelease')"
              >发表文章</a
            >
          </div>
        </div>
        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>标题</th>
              <th>作者</th>
              <th>分类</th>
              <th class="text-center">发表时间</th>
              <th class="text-center">状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in articleList" :key="item.id">
              <td>{{ item.title }}</td>
              <td>{{ item.author }}</td>
              <td>{{ item.category }}</td>
              <td class="text-center">{{ item.date }}</td>
              <td class="text-center">{{ item.state }}</td>
              <td class="text-center">
                <a href="javascript:void(0);" @click="$router.push({name:'articleRelease',params:item})" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:void(0);"
                  class="btn btn-danger btn-xs delete"
                  >删除</a>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="row text-center">
          <el-pagination
          @current-change="pageClick"
            background
            layout="prev, pager, next"
            :page-count="totalPage"
            :current-page.sync="page"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticle, getArticleCategory, deleteArticle } from './article.js'
export default {
  name: 'articleList',
  data () {
    return {
      articleList: [],
      categoryList: [],
      state: '',
      page: 1,
      categoryId: '',
      totalPage: 0
    }
  },
  created () {
    this.reload()
  },
  methods: {
    async reload () {
      let res1 = await getArticleCategory()
      //   console.log(res1)
      this.categoryList = res1.data.data
      let res2 = await getArticle({
        type: this.categoryId,
        state: this.state,
        page: this.page,
        perpage: 10
      })
    //   console.log(res2)
      this.articleList = res2.data.data.data
      this.totalPage = res2.data.data.totalPage
    },
    // 这里利用的是$emit事件通知方法，自定义事件一般都是事件通知
    pageClick(page) {
        // this.$emit('事件名（pageClick）','修改的参数(page)')
        this.page=page
        // console.log(page);
        this.reload()
    }
  }
}
</script>

<style></style>
